<template>
	<div class="goods">
		<van-swipe class="goods-swipe" :autoplay="3000">
			<van-swipe-item v-for="img in goods.img" :key="img">
				<img :src="img" />
			</van-swipe-item>
		</van-swipe>

		<van-cell-group>
			<van-cell>
				<template #title>
					<div class="goods-title">{{ goods.title }}</div>
					<div class="goods-price">{{ formatPrice(goods.price) }}</div>
				</template>
			</van-cell>
			<van-cell class="goods-express">
				<template #title>
					<van-col span="10">运费：{{ goods.express }}</van-col>
					<van-col span="14">剩余：{{ goods.remain }}</van-col>
				</template>
			</van-cell>
		</van-cell-group>

		<van-cell-group class="goods-cell-group">
			<van-cell value="进入店铺" icon="shop-o" is-link @click="sorry">
				<template #title>
					<span class="van-cell-text">我的店铺</span>
					<van-tag class="goods-tag" type="danger">官方</van-tag>
				</template>
			</van-cell>
			<van-cell title="线下门店" icon="location-o" is-link @click="sorry" />
		</van-cell-group>
		
		<van-cell-group class="goods-cell-group">
			<van-cell class="goods-spec">
				<template #title>
					<van-col span="10">规格</van-col>
				</template>
			</van-cell>
		</van-cell-group>
		
		<van-cell-group class="goods-cell-group">
			<van-cell title="查看商品详情" is-link @click="toDetail(goods.id)" />
		</van-cell-group>

		<van-action-bar>
			<van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
			<van-action-bar-icon icon="cart-o" @click="onClickCart">
				购物车
			</van-action-bar-icon>
			<van-action-bar-icon icon="user-o" text="我的" @click="onClickIcon" />
			<van-action-bar-button type="warning" @click="sorry">
				加入购物车
			</van-action-bar-button>
			<van-action-bar-button type="danger" @click="sorry">
				立即购买
			</van-action-bar-button>
		</van-action-bar>
	</div>
</template>

<script>
	import http from '../../utils/axios'
	import router from '../../route/index'
	import { useRoute } from 'vue-router'
	
	export default {
		data() {
			return {
				goods: {}
			};
		},
		
		created() {
			this.getDetail()
		},
		
		methods: {
			getDetail() {
				let route = useRoute()
			    http.post(`/detail`, route.params).then(res => {
			        this.goods = res
			    })
			},
			
			formatPrice() {
				return '¥' + (this.goods.price / 100).toFixed(2)
			},

			onClickCart() {
				router.push('cart')
			},

			sorry() {
				showToast('暂无后续逻辑~')
			},
			
			toDetail(goodsId){
				router.push({name: 'Detail', params: {id: goodsId}})
			}
		},
	};
</script>

<style lang="less">
	.goods {
		padding-bottom: 50px;

		&-swipe {
			img {
				width: 100%;
				height: 20rem;
				display: block;
			}
		}

		&-title {
			font-size: 16px;
		}

		&-price {
			color: #f44;
		}

		&-express {
			color: #999;
			font-size: 12px;
			padding: 5px 15px;
		}

		&-cell-group {
			margin: 15px 0;

			.van-cell__value {
				color: #999;
			}
		}

		&-tag {
			margin-left: 5px;
		}
	}
</style>